@import "../../src/style/vars";

$sidebar-dark-bg-color: #343a40;
$sidebar-dark-bg-color-light-8: mix($--color-white, $sidebar-dark-bg-color, 80%);
$sidebar-dark-color: rgba(255, 255, 255, .8);
$sidebar-dark-hover-color: rgb(255, 255, 255);
$sidebar-dark-border-color: #4b545c;
$header-height: 49px;
$componentName: xdh-admin-lte;
.xdh-admin-lte {
  min-width: 1200px;
  min-height: 100%;
  &__sidebar {
    background: $sidebar-dark-bg-color;
    color: $sidebar-dark-color;
    height: 100%;
    font-size: 14px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .30), 0 10px 10px rgba(0, 0, 0, .20);
    position: absolute;
    width: 100%;
    z-index: $--index-normal;
    a {
      color: $sidebar-dark-color;
      &:hover {
        color: $sidebar-dark-hover-color;
      }
    }
  }
  &__brand {
    height: $header-height;
    line-height: $header-height;
    border-bottom: 1px solid $sidebar-dark-border-color;
    overflow: hidden;
    img {
      width: 32px;
      height: 32px;
      float: left;
      margin: 8px 0 12px 16px;
    }
    span {
      font-size: 20px;
      font-weight: 400;
      margin-left: 10px;
    }
  }

  &__menu {
    height: calc(100% - #{$header-height + 1px});
    .el-menu {
      background: transparent;
    }
    .el-submenu .el-menu-item {
      //height: 40px;
      //line-height: 40px;
    }
    .el-submenu.is-active > .el-submenu__title {
      color: $sidebar-dark-hover-color;
      > i {
        color: $sidebar-dark-hover-color;
      }
    }
    .el-menu-item, .el-submenu__title {
      color: $sidebar-dark-color;
      //height: 50px;
      //line-height: 50px;
      &:hover {
        background: rgba(255, 255, 255, .1);
        color: $sidebar-dark-hover-color;
      }
      &.is-active {
        background: rgba(255, 255, 255, .2);
        color: $sidebar-dark-hover-color;
      }
    }
  }
  &__popper > .el-menu--popup {
    background: $sidebar-dark-bg-color !important;
    color: $sidebar-dark-color;
    .el-menu-item, .el-submenu__title {
      color: $sidebar-dark-color;
      &:hover {
        background: rgba(255, 255, 255, .1);
        color: $sidebar-dark-hover-color;
      }
      &.is-active {
        background: rgba(255, 255, 255, .2);
        color: $sidebar-dark-hover-color;
      }
    }
  }

  > .xdh-layout__wrapper {
    background: $--background-color-base;
  }
  &__main {
    min-height: 100%;
    position: absolute;
    width: 100%;
  }
  &__header {
    border-bottom: 1px solid $--border-color-light;
    background-color: #fff;
  }
  &__switch {
    line-height: $header-height;
    height: $header-height;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    width: $header-height;
    text-align: center;
    float: left;
    > i {
      font-size: 20px;
      color: $--color-info;
      display: inline-block;
      transition: transform 0.3s;
    }
    &:hover i {
      color: rgba(0, 0, 0, 0.7)
    }
    &.is-collapsed {
      i {
        transform: rotate(90deg);
      }

    }

  }
  &__footer {
    line-height: 39px;
    height: 39px;
    padding: 0 20px;
    border-top: 1px solid $--border-color-light;
    background-color: #fff;
    span {
      float: left;
      color: $--color-info;
      &.version {
        float: right;
      }
    }
  }
  &__top-menu {
    display: inline-block;
    float: left;
    border-bottom: none !important;
  }

  &__tool {
    float: right;
    padding: 0 20px;
    line-height: $header-height;
    border-left: 1px solid $--border-color-lighter;
    height: $header-height;
  }

  &__user {
    cursor: pointer;
  }
  &__tabs {
    width: calc(100% - 60px);
    display: block;
    float: left;
    background: transparent !important;
    position: relative;
    top: 2px;
    height: $header-height !important;

    .el-tabs__nav {
      border-color: transparent !important;

    }
    .el-tabs__header {
      background: transparent !important;
      border-bottom: none !important;
    }
    .el-tabs__item {
      height: $header-height - 2px !important;
      line-height: $header-height - 2px !important;
      background: transparent !important;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      font-size: 14px;
      i {
        font-size: 14px;
      }

      &.is-active {
        background: $--background-color-base !important;
        border: 1px solid $--border-color-light !important;
        border-bottom-color: $--background-color-base !important;
        border-radius: 4px 4px 0 0 !important;
      }
    }
    .xdh-nav-tabs__tool {
      height: 14px;
      width: 30px;
      line-height: 0;
      margin-top: ($header-height - 16px) / 2;
      border-bottom: none;
      .el-icon-setting {
        width: 30px;
      }

    }
    .el-tabs__nav-next, .el-tabs__nav-prev {
      line-height: $header-height - 5px !important;
      background: $--background-color-base;
      border-radius: 2px;
      transform: translateY(1px);
      &:hover {
        background: $--color-primary-light-9;
      }
    }
  }
  &__body {
    height: calc(100% - 30px);
    padding: 15px;
  }
}
